<template>
  <div id="content">
    <globle-linear-border>
      <el-card class="searchBox">
        <el-form :inline="true">
          <el-form-item label="姓名">
            <el-input v-model="pageQuery.otherParams.name" placeholder="输入学生姓名搜索" clearable />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="pageQuery.otherParams.sex" placeholder="选择学生性别搜索" clearable>
              <el-option label="男" value="1" />
              <el-option label="女" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <section>
              <el-button type="primary" icon="Search" @click.stop="getPageInfo">搜 索</el-button>
              <el-button type="warning" icon="RefreshRight" @click.stop="reset">重 置</el-button>
            </section>
          </el-form-item>
        </el-form>
      </el-card>
    </globle-linear-border>

    <globle-linear-border style="margin-top: 20px">
      <el-card class="mainBox">
        <span v-if="tableData.rows">
          <el-table :border="true" stripe :data="tableData.rows" cell-class-name="table-cell"
            header-cell-class-name="table-header-cell">
            <el-table-column property="studentId" label="学号" width="140" show-overflow-tooltip />
            <el-table-column property="name" label="姓名" width="100" />
            <el-table-column label="性别">
              <template #default="scope">{{ scope.row.sex === 1 ? '男' : '女' }}</template>
            </el-table-column>
            <el-table-column property="qq" label="QQ号" />
            <el-table-column property="phone" label="手机号" />
            <el-table-column property="identityId" label="身份证号" width="180" />
            <el-table-column property="college" label="学院" width="180" />
            <el-table-column property="major" label="专业" />
            <el-table-column property="stuClass" label="班级">
              <template #default="scope">{{ scope.row.stuClass }}</template>
            </el-table-column>
          </el-table>
          <el-pagination v-model:currentPage="pageQuery.pageParams.pageNum"
            v-model:page-size="pageQuery.pageParams.pageSize" :page-sizes="pageSizeOption" :background="true"
            :small="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.totalSize"
            @size-change="onSizeChange" @current-change="onCurrentChange" />
        </span>
      </el-card>
    </globle-linear-border>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElTable } from 'element-plus';
import { IPageParams, IPageRes, IStu, APIData } from '../../../type';
import { useUserStore } from '../../../store/user';
import { useAPI } from '../../../request/api';
const store = useUserStore();

onMounted(() => {
  getPageInfo();
});

const api = useAPI();
const pageSizeOption = [5, 10, 15, 20];
const pageQuery = reactive<IPageParams>({
  otherParams: {
    name: '',
    sex: '',
    college: store.userInfo.college,
    major: store.userInfo.major,
    stuClass: store.userInfo.stuClass,
    grade: store.userInfo.grade,
  },
  pageParams: {
    pageNum: 1,
    pageSize: pageSizeOption[1],
    sortField: '',
    sortType: '',
  },
});
const tableData = ref({} as IPageRes);

const reset = () => {
  pageQuery.otherParams.name = '';
  pageQuery.otherParams.sex = '';
  pageQuery.pageParams = {
    pageNum: 1,
    pageSize: pageSizeOption[1],
    sortField: '',
    sortType: ''
  }
  getPageInfo();
}

//分页大小
const onSizeChange = (val: number) => {
  pageQuery.pageParams.pageSize = val;
  pageQuery.pageParams.pageNum = 1;
  getPageInfo();
};
//分页页码
const onCurrentChange = (val: number) => {
  pageQuery.pageParams.pageNum = val;
  getPageInfo();
};

const getPageInfo = async () => {
  const res: APIData = await api.student.findPage(pageQuery);
  if (res.code === 200) tableData.value = res.data;
  else ElMessage.error(res.message);
};
</script>

<style lang="scss" scoped>
#content {
  height: 100%;
  padding: 14px 32px;

  .searchBox {
    &-item {
      margin-right: 10px;
    }

    // :deep(.el-form-item) {
    //   margin-bottom: 0;
    // }

    :deep(.el-card__body) {
      display: flex;
      justify-content: space-between;
    }

    section {
      display: flex;
    }

    :deep(.el-input__wrapper) {
      width: 200px;
    }
  }

  .mainBox {
    :deep(.el-checkbox__inner) {
      background-color: var(--main-color);
      transition: background 0.3s ease;
    }

    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: var(--active-color);
      transition: background 0.3s ease;
    }
  }
}
</style>
